<template>
    <div :class="theModeClass">
        <a-card v-if="mode!='mode3'"  :title="title"  :bordered="bordered" :size="size" :hoverable="hoverable" :loading="loading" @tabChange="key => onTabChange(key)"
            :defaultActiveTabKey="defaultActiveTabKey" :type="type" :tabList="tabList">
            <slot name="actions" slot="actions"></slot>
            <slot name="extra" slot="extra"></slot>
            <slot name="cover" slot="cover"></slot>
            <slot name="tabBarExtraContent" slot="tabBarExtraContent"></slot>
            <slot />
        </a-card>
        <div v-if="mode=='mode3'" class="ant-card" :class="shadow?'ant-card-hoverable':''">
            <div  class="ant-card-head">
                <div class="ant-card-head-title">
                <span style="padding:0 10px">{{title}}</span>
                </div>
            </div>
            <div  class="ant-card-body">
                <slot />
            </div>
        </div>
    </div>
</template>
<script>
// import 'ant-design-vue/dist/antd.css'
export default {
	name: 'ZhCard',
	props: {
        //模式default 默认 mode1 背景是淡色 字体是主题色 mode2 背景是主题色，字体是白色 
        mode:{
            type: String,
            default:'mode2'
        },
        title:{
            type: String,
            default:null
        },
        defaultActiveTabKey:{
            type: String,
            default:undefined
        },
        tabList:{
            type:Array,
			default(){
				return undefined
            }
        },
        type:{
            type: String,
            default:undefined
        },
        bordered:{
            type: Boolean,
            default:false
        },
        hoverable:{
            type: Boolean,
            default:true
        },
        loading:{
            type: Boolean,
            default:false
        },
        size:{
            type: String,
            default:'small'
        },
        //是否显示阴影
        shadow: {
            type: Boolean,
            default: false
        }
    },
    computed:{
		theModeClass(){
            let modeClass=''
            if(this.mode=='mode1'){
                modeClass='zh-card-mode1'
            }else if(this.mode=='mode2'){
                modeClass='zh-card-mode2'
            }else if(this.mode=='mode3'){
                modeClass='zh-card-mode3'
            }
			return modeClass;
		},
    },
    data() {
		return {
           
        }
    },
    created(){
      
    },
    methods: {
        onTabChange(key){
            this.$emit('tabChange',key);
        }
    }
}
</script>
<style  lang="less">
// .ant-card-hoverable {
//   cursor: pointer;
//   border-color: rgba(0, 0, 0, 0.09);
//   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
// }
// .ant-card-small > .ant-card-head > .ant-card-head-wrapper > .ant-card-head-title {
//     padding: 6px 0;
// }
// .ant-card-small > .ant-card-head > .ant-card-head-wrapper > .ant-card-extra {
//   padding: 6px 0;
//   font-size: 14px;
// }
// .zh-card-mode1{
//     .ant-card-head {
//         min-height: 24px;
//         margin-bottom: -1px;
//         padding: 0 12px;
//         line-height: 24px;
//         color: @primary-6;
//         font-weight: 600;
//         font-size: 14px;
//         background-color:@primary-1;
//         border-bottom: 0px solid @primary-color;
//         border-radius: 2px 2px 0 0;
//         zoom: 1;
//     }
   
// }
// .zh-card-mode2{
//     .ant-card-head {
//         min-height: 24px;
//         line-height: 24px;
//         margin-bottom: -1px;
//         padding: 0 12px;
//         color:  #ffffff;
//         font-weight: 600;
//         font-size: 14px;
//         background-color: @primary-4;
//         border-bottom: 1px solid @primary-4;
//         border-radius: 2px 2px 0 0;
//         zoom: 1;
//     }
   
// }
// .zh-card-mode3{
//     .ant-card {
        
//         background: #fff;
//         border-radius: 2px;
//         transition: all 0.3s;
//         .ant-card-head {
//             padding: 0 20px 0 20px;
//             color:  @primary-6;
//             font-weight: 600;
//             font-size: 14px;
//             background-color: transparent;
//             border: 0 solid @primary-color;
//              .ant-card-head-title {
//                 background-color:#fff;
              
//             }
//         }
       
//         .ant-card-body {
//             padding: 24px 24px 12px 24px;
//             margin-top:-30px;
//             zoom: 1;
//             border: 1px solid @primary-color;
//             border-radius: 2px 2px 2px 2px;
//         }
//     }
    
    
   
// }

</style>